<script setup>
const { data, columns } = defineProps({
  data: Array,
  columns: Array
})
</script>

<template>
  <div
    class="border-1px border-solid border-#f2f4f7 rounded-4px mt-12px mb-4px"
  >
    <van-row class="odd:bg-#F5F7FA h-36px text-14px c-tio-01 font-din px-20px" v-for="(item, i) in data" :key="item.id">
      <van-col
        class="bg-transparent flex items-center justify-start h-full whitespace-nowrap"
        :span="col.span"
        v-for="col in columns"
        :key="col.key"
      >
        <span v-if="col.key === 'index'">{{ i + 1 }}</span>
        <span v-else>{{ item[col.key] }}</span>
      </van-col>
    </van-row>
  </div>
</template>

<style scoped lang="less"></style>
